<template lang='pug'>
  div.home 
    div.open( @click="close" v-if="!showMenu") 
      i.el-icon-menu( style="margin-top:20px;color:#fff")

    el-container
      el-aside.asider( style="width:200px" v-if="showMenu")
        el-header.logo( style="height:60px")
          img.avatar( src="../images/avatar.jpeg")
          div.out( @click="logOut")  退出登陆

          i.el-icon-caret-left.color( @click="close")
        //- :default-active=""
        el-scrollbar(wrap-class="scrollbar-wrapper")
          el-menu( unique-opened  background-color="#001" text-color="#fff" active-text-color="#fff400" style="border:0")
            div( v-for="item in routes"   :key="item.sort")
              el-submenu( v-if="!item.hide"  :index="item.sort")
                template( slot="title") #[i.el-icon-menu] {{item.name}}
                el-menu-item-group
                  div( v-for="semi in item.children" :key="semi.sort" )
                    el-menu-item( :index="semi.sort"  @click="routerTo(item.path,semi.path)" ) {{semi.name}}
          

      el-main.mainer( :style="{'padding-left': showMenu?'20px':'40px'}")
        AppMain
  
</template>

<script>
import { mixin } from "../mixin/index";
import AppMain from "../components/AppMain";
export default {
  mixins: [mixin],
  name: "home",
  components: {
    AppMain
  },
  data() {
    return {
      showMenu: true,
      bgList:[
        '@/images/main/a.jpg',
        '@/images/main/b.jpg',
        '@/images/main/c.jpg',
        '@/images/main/d.jpg',
      ]
      
    };
  },
  watch:{
 
  },
  mounted(){

  },
  created() {
    
  },
  computed: {

    routes() {
      return this.$router.options.routes;
    }
  },
  methods: {
    close() {
      this.showMenu = !this.showMenu;
    },
    routerTo(url, securl) {
      this.$router.push({ path: url + "/" + securl });
    }
  }
};
</script>
<style lang="less" scoped>
.open {
  position: fixed;
  width: 26px;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes open {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.2;
  }
}

.color {
  color: #fff;
  margin-left: 20px;
  cursor: pointer;
  transform: scale(1.6);
}
.avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.out {
  color: #fff;
  cursor: pointer;
}
.home {
  box-sizing: border-box;
  height: 100%;
  background: url("../images/main/b.jpg") no-repeat;
  background-size: cover;
}
.logo {
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
}
.el-container {
  height: 100%;
}
.asider {
  background: rgba(0, 0, 0, 0.6);
}
.mainer {
  // border:2px solid #fff;
}
</style>

